<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>	
	<title>Jonathan Charles fine furniture</title>
	<link rel="shortcut icon" type="image/x-icon" href="icon.gif" />
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="Author" content="Jonathan Charles" />
	<meta name="viewport" content="width=960" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, IE=9" />
	<meta name="omni_page" content="Jonathan Charles fine furniture" />
	<meta name="Category" content="chairs, table, cabinet, accessory, etc..." />
    <meta name="keywords" content="Jonny, furniture" />
	<meta name="Description" content="Hi Jonny, I like your furniture" />    
    <link type="text/css" rel="stylesheet" href="css/style.css">
	<link type="text/css" rel="stylesheet" href="css/product.css">
	<link type="text/css" rel="stylesheet" href="css/thickbox.css">	
	<link type="text/css" rel="stylesheet" href="css/main.css">	
	<link type="text/css" rel="stylesheet" href="css/rcarousel.css" />	
	<link type="text/css" rel="stylesheet" href="css/smoothDivScroll.css" />
	<link type="text/css" rel="stylesheet" href="css/demo.css" />
	<link type="text/css" rel="stylesheet" href="css/jquery.cluetip.css">
	
	<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>		
	<script type="text/javascript" src="js/jquery.isotope.js"></script>
	<script type="text/javascript" src="js/jcarousel.js"></script>		
	<script type="text/javascript" src="js/jquery.hoverIntent.minified.js"></script>	
	<script type="text/javascript" src="js/jquery.cluetip.js" ></script>
	<script type="text/javascript" src="js/jquery.ezpz_tooltip.js" ></script>		
	<style type="text/css" media="screen">

	
</style>
	</head>
<body>
<div class="wrapper" id="wrapper_header" style="height:87px">
	<div id ="header"class="col_24">
		<div id="logo" class="col_8"><a href="index.php"><img src="img/css-element/logo-jc.png" border="0"></a></div>
		<div id="right-header" class="col_16"></div>
	</div>
	<div class="navigation">
		<div id="navigation" class="col_24">
			<div id="main-menu">
				<ul>
					<li><a href="#" class="active">CATALOGUE</a></li>
					<li><a href="#">MY COLLECTIONS</a></li>
					<li><a href="#">NEWS</a></li>
					<li><a href="#">CONTACT</a></li>
					<li><a href="#">MEDIA</a></li>
					<li><a href="#">BLOG</a></li>
					<li><a href="#">MY PAGE</a></li>
				</ul>
			</div>        
		</div>
	</div><!--NAVIGATION END-->
</div><!--WRAPPER END-->

<div class="wrapper">
	<div id="panel" style="background:transparent;height:150px">
		<div class="catalogue-navigation">
			<div id="catalogue-menu" data-option-key="filter">
				<div id="categories" class="selected" data-value="category"></div>
				<div id="collections" data-value="collection"></div>
				<div id="rooms" data-value="room"></div>
				<div id="new-introductions" data-value="introduction"></div>
			</div>
		</div><!--CATALOGUE-NAVIGATION END-->

		<div class="sketch-navigation">
			<div id="sketch-navigation" class="col_24">			
				<div class="infiniteCarousel">
				  <div style="overflow: hidden;" class="wrapper" id="jnavigation">
					<ul>
						<li><a href="#"><img src="img/sketch/accessory.jpg" border="0"></a></li>
						<li><a href="#"><img src="img/sketch/table.jpg" border="0"></a></li>
						<li><a href="#"><img src="img/sketch/mirrors.jpg" border="0"></a></li>
						<li><a href="#"><img src="img/sketch/chairs.jpg" border="0"></a></li>
						<li><a href="#" ><img src="img/sketch/bed.jpg" border="0"></a></li>
					</ul>
					</div>		 
				</div>		
			</div>
		</div>
		<div id="sub-menu" style="display:none">
		   <ul>
			  <li><a href="category.php">SEE ALL <spam>TABLE</span></a></li>
			  <li><a href="category.php">BAR</a></li>
			  <li><a href="category.php">CENTER</a></li>
			  <li><a href="category.php">COFFE</a></li>
			  <li><a href="category.php">CONSOLE</a></li>
			  <li><a href="category.php">DESK</a></li>
			  <li><a href="category.php">DINING</a></li>
			  <li><a href="category.php">DRESSING</a></li>
			  <li><a href="category.php">OCCASIONAL</a></li>
			  <li><a href="category.php">GAME</a></li>
		   </ul>
		</div>
	</div>
</div>

<div class="sub-navigation">
	<ul id="topnav">
		<li><a href="#" class="sub-product">284 DINING TABLE</a></li>	
        <li><a href="#" class="print"></a></li>       
        <li><a href="#" class="share"></a></li>
        <li>
			<a href="#" class="avalaibility">AVALAIBILITY</a>
				<div class="sub">
					<ul id="filters" class="option-filter" data-option-key="filter">
						<li><a href="#filter" data-option-value="*" class="selected">SEE ALL PRODUCTS</a></li>
						<li><a href="#filter" data-option-value=".1_week">1 Week Delivery</a></li>
						<li><a href="#filter" data-option-value=".2_week">2-4 Weeks Delivery</a></li>
						<li><a href="#filter" data-option-value=".6_week">6-8 Weeks Delivery</a></li>
						<li><a href="#filter" data-option-value=".8_week">8-14 Weeks Delivery</a></li>
						<li><a href="#filter" data-option-value=".14_week">14-22 Weeks Delivery</a></li>
					</ul>
				</div>
		</li>
       <li>
			<a href="#" class="sort-by">SORT BY</a>
				<div class="sub">
					<ul id="sort-by-hahd" class="option-sort" data-option-key="sortBy">
						<li><a href="#sortBy=code" data-option-value="code" class="selected">Product code</a></li>
						<li><a href="#sortBy=collection" data-option-value="collection">Collections</a></li>
						<li><a href="#sortBy=room" data-option-value="room">Rooms</a></li>
						<li><a href="#sortBy=finish" data-option-value="finish">Finish Code</a></li>
						<li><a href="#sortBy=quickship" data-option-value="quickship">Quick Ship</a></li>
					</ul>
				</div>
		</li>
       <li>
			<a href="#" class="view">VIEW</a>
				<div class="sub">
					<ul>
						<li class="grid"><a href="#" style="padding-left:20px;">Grid View</a></li>
						<li class="list"><a href="#" style="padding-left:20px;">List View</a></li>
						<li class="compare"><a href="#" style="padding-left:20px;">Compare View</a></li>
         	           <li><a href="#">SEE ALL PRODUCTS</a></li>
         	           <li><a href="#">120 Products per page</a></li>
         	           <li><a href="#">90 Products per page</a></li>
         	           <li><a href="#">60 Products per page</a></li>
         	           <li><a href="#">30 Products per page</a></li>
        	        </ul>
				</div>
		</li>
		<li><a href="#" class="zoom-out"></a></li>		
        <li><a href="#" class="thumbnails-size"></a></li>		
        <li><a href="#" class="zoom-in"></a></li>    		
		<div id="back-button">GO BACK</div>	
	</ul>	
</div><!--SUB-NAVIGATION END-->

<div class="wrapper">
<div id="product_detail" style="display:none"></div>
<div id="product_container" class="content" style="text-align:center;">	
	<?php 
	$value= array("1_week","2_week","6_week","8_week","14_week");	
	$room= array("room1","room2","room3","room4","room5");	
	$collection= array("collection1","collection2","collection3","collection4","collection5");
	$finish=array(1,2,3,4,5);
	
	for($i=1;$i<41;$i++){
		$key_filer=array_rand($value,2);
		$key_collection=array_rand($collection,2);
		$key_room=array_rand($room,2);
		$key_finish=array_rand($finish,2);
		$quickship=$i%2;
		if($i>20){
			$k=rand(5,20);
			$image_name="img/resize/img_".$k.".jpg";		
		}else{
			$k=$i;
			$image_name="img/resize/img_".$i.".jpg";		
		}
		
		?>
			<div class="item <?php echo $value[$key_filer[0]]; ?>" data-code="<?php echo $i;?>" data-collection="<?php echo $collection[$key_collection[0]]; ?>" data-room="<?php echo $room[$key_room[0]]; ?>" data-finish="<?php echo $fisnish[$key_finish[0]]; ?>" data-quickship="<?php echo $quickship; ?>">
				<a href="#product_<?=$i?>" class="slide" title="thuong test data" id="fancy-target-<?=$i?>" ref="<?php echo $i;?>"><img src="<?php echo $image_name;?>" style="border:0" detail="<?php echo "img_".$k.".jpg"?>"></a>
			</div>	


		<div class="fancy-tooltip-content tooltip-content fancy-content" id="fancy-content-<?=$i?>">
			<div style="margin-left:10px">
				<div style="padding-bottom:10px;">
					<span>Product name</span>
					<span> QS|SP|Dis icon</span>
				</div>
				<div>
					<table>
						<tr><td>1 week</td><td>2-4 weeks</td><td>6-8 weeks</td><td>8-14 weeks</td><td>14-22 weeks</td></tr>
						<tr><td colspan="5" style="border-bottom:1px solid #fff;"></td></tr>
						<tr><td>1 </td><td>2</td><td>20</td><td>50</td><td>100</td></tr>
					</table>
				</div>
			</div>	
		</div>
			
		<?php }?>
		<nav id="page_nav">
    <a href="load_next_page.php"></a>
  </nav>
    
</div><!--WRAPPER END-->
</div>
<div id="last_msg_loader"style="float:right; margin-right:70px;cursor:pointer;"></div>
</body>
</html>

		
<script>
$(document).ready(function() {
	//delete some cookie 
	deleteCookie('first_top');
	deleteCookie('first_scroll');
	deleteCookie('zoom');
	
	// init isotop	
	$('.infiniteCarousel').infiniteCarousel();
	$('#panel').show();	
	
	// effect
	var height_row=160;
	
	$container = $('#product_container'); 
	$container.isotope({
			itemSelector: '.item',			
			getSortData : {
			  code : function( $elem ) {
				return $elem.attr('data-code');
			  },
			  collection : function( $elem ) {
				return $elem.attr('data-collection');
			  },
			  room : function( $elem ) {
				return $elem.attr('data-room');
			  },
			  finish : function( $elem ) {
				return $elem.attr('data-finish');
			  },
			  quickship : function ( $elem ) {
				return $elem.attr('data-quickship');
			  }
			},
			masonry : {
			  columnWidth : 20
			},
	});
	
	// zoom in zoom out 	
	setCookie('zoom',1, 1);	
	$('.zoom-in').live("click",function(e){	
		$zoom_current=parseInt(getCookie('zoom'));
		$container.find('.item').each(function(){
			var $this = $(this),
			$zoom_current=getCookie('zoom');
			number = parseInt( $this.find('.slide').attr('ref'), 10 );			
			if($zoom_current==0){								
				height_row=100;
				$this.removeClass('smaller');	
				$this.removeClass('larger');
				deleteCookie('first_top');
					
			}else if($zoom_current=='1'){
				height_row=250;
				$this.removeClass('smaller');	
				$this.addClass('larger');
				setCookie('first_top','1',1);	
			}			
		});			
		$container.isotope('reLayout');
		if($zoom_current<2){
			setCookie('zoom',$zoom_current+1, 1);	
		}else{
			setCookie('zoom',2, 1);	
		}
        return false;
	});
	$('.thumbnails-size').live("click",function(e){
		height_row=160;
		$container.find('.item').each(function(){
			var $this = $(this),
			number = parseInt( $this.find('.slide').attr('ref'), 10 );
			$this.removeClass('larger');
			$this.removeClass('smaller');
			deleteCookie('first_top');
		});	
		$container.isotope('reLayout');
		setCookie('zoom',1, 1);	
        return false;
		
	});
	
	$('.zoom-out').live("click",function(e){

		$zoom_current=parseInt(getCookie('zoom'));
		$container.find('.item').each(function(){
			var $this = $(this),
			$zoom_current=getCookie('zoom');
			if($zoom_current=='2'){
				height_row=160;
				$this.removeClass('smaller');
				$this.removeClass('larger');
				deleteCookie('first_top');
			}else if($zoom_current=='1'){
				height_row=100;
				$this.removeClass('larger');
				$this.addClass('smaller');	
				setCookie('first_top','1',1);
			}
		});	
		$container.isotope('reLayout');
		if($zoom_current >0){
			setCookie('zoom',$zoom_current-1, 1);	
		}else{
			setCookie('zoom',0, 1);	
		}
        return false;
		
	});	
	// end zoom  

	// filter 
	var $optionSets = $('#topnav .option-filter'),
          $optionLinks = $optionSets.find('a');
	
	$optionLinks.click(function(){
		var $this = $(this);
        // don't proceed if already selected
        if ( $this.hasClass('selected') ) {
          return false;
        }
        var $optionSet = $this.parents('.option-filter');
        $optionSet.find('.selected').removeClass('selected');
        $this.addClass('selected');
  
        // make option object dynamically, i.e. { filter: '.my-filter-class' }
        var options = {},
            key = $optionSet.attr('data-option-key'),
            value = $this.attr('data-option-value');
        // parse 'false' as false boolean
        value = value === 'false' ? false : value;
        options[ key ] = value;
        if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
          // changes in layout modes need extra logic
          changeLayoutMode( $this, options )
        } else {
          // otherwise, apply new options
          $container.isotope( options );
        }
        
        return false;
     });
	// end filter
	// sort
	
	var $sortSets = $('#topnav .option-sort'),
          $sortLinks = $sortSets.find('a');

      $sortLinks.click(function(){
	 	    var $this = $(this);
        // don't proceed if already selected
        if ( $this.hasClass('selected') ) {
          return false;
        }
        var $sortSet = $this.parents('.option-sort');
        $sortSet.find('.selected').removeClass('selected');
        $this.addClass('selected');
  
        // make option object dynamically, i.e. { filter: '.my-filter-class' }
        var options = {},
            key = $sortSet.attr('data-option-key'),
            value = $this.attr('data-option-value');
        // parse 'false' as false boolean
        value = value === 'false' ? false : value;
        options[ key ] = value;
        if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
          // changes in layout modes need extra logic
          changeLayoutMode( $this, options )		  
        } else {
          // otherwise, apply new options
          $container.isotope( options );
        }
        
        return false;
      });
	// end sort	
	
	
	//start slide details 
	
	var slideIsOpen = false;
	
	$("a.slide").live('click', function(e){
		e.preventDefault();
		//var position = $(this).position();
		//alert(e.pageY);
		//setCookie('first_top',e.pageY, 1);
		h_header=parseInt($('#wrapper_header').height());	
		
		if($('#panel').is(':visible')){
			h_panel=parseInt($('#panel').height());	
		}else{
			h_panel=0;
		}	
		h_total=h_header + h_panel;
		
		//alert(h_total);
		// tinh vi tri cua con tro 
		var real_height=e.pageY-h_total;
		
		//alert(real_height);
		
		need_height=Math.floor(real_height/height_row);
		
		if(need_height){
			final_height=h_total + (need_height*height_row);
		}else{
			final_height=h_total;
		}
		setCookie('first_top',final_height, 1);
		$(this).addClass("active");
		
		var img_detail=$(this).children().attr('detail');
		$('#product_detail').load('product.php?img='+img_detail);
		
		var slides_productClicked = $(this).parent(),
			slides_alreadyOpenProduct = $('.item.item-expanded'),
			slides_productID = $(this).attr('href').replace('#', '');
			
		if($.browser.safari){ bodyelem = $("body") } else{ bodyelem = $("html") }
		$('.item').removeClass("click_active");
		slides_productClicked.addClass("click_active");
		if(slideIsOpen) {
			if (slides_productClicked.hasClass("item-expanded")) {
				// The item we're clicking is already open, so all we need to do is close this single item.
				bodyelem.animate({'scrollTop':h_total}, 2000, function() {
					slides_productClicked.removeClass("item-expanded");				
					$('#product_detail').removeClass("product-detail-expanded").slideToggle(1000, function() {
						slideIsOpen = false;
						deleteCookie('first_top');
					});
				});
			}
			else {
				//close other slides
				slides_alreadyOpenProduct.removeClass("item-expanded");
				$('#product_detail').removeClass("product-detail-expanded").slideToggle(1000, function() {
					
				});	
				bodyelem.animate({'scrollTop':h_total}, 2000, function() {
						//open new slide
						slides_productClicked.addClass("item-expanded");
						$('#product_detail').removeClass("product-detail-expanded").slideToggle(1000, function() {
					
						});	
					})				
			}
		}else{		
			slides_productClicked.addClass("item-expanded");
			bodyelem.animate({'scrollTop':h_total}, 2000, function() {
				$('#product_detail').addClass("product-detail-expanded").slideToggle(1000, function() {
					slideIsOpen = true;
				});
			});
		}
	});	
	
	// close details 
	$('.close').live('click', function() {
		var slides_slideToClose = $('.item.item-expanded');
		$return_top=getCookie('first_top');
		slides_slideToClose.removeClass("item-expanded");
		
		$('#product_detail').slideToggle(1000, function() {
			slideIsOpen = false;
			bodyelem.animate({'scrollTop':$return_top}, 1000,function(){
				deleteCookie('first_top');
			});
		});
		
	});	
	// end product details 
	
	// start menu click 
	$('.sub-product, #main-menu a').live('click', function(e){			
			$('#panel').slideToggle(1000,function(){
				
			});				
	});	
	$('#catalogue-menu >div').live('click', function(e){			
			$this=$(this);
			$('#catalogue-menu >div').removeClass('selected');
			$this.addClass('selected');
			$('#sketch-navigation').load('ajax_category.php?type='+$this.attr('data-value'));	
	});
	
	$('#jnavigation a').live('click', function(e){
		$this=$(this);
		$('#jnavigation a').removeClass('active');
		$('#sub-menu').fadeOut().fadeIn(1000);
		$this.addClass('active')
		
	});
	// end menu click
	
	// function for cookie 
	function setCookie(name,value,days) {
		if (days) {
			var date = new Date();
			date.setTime(date.getTime()+(days*24*60*60*1000));
			var expires = "; expires="+date.toGMTString();
		}
		else var expires = "";
		document.cookie = name+"="+value+expires+"; path=/";
	}

	function getCookie(name) {
		var nameEQ = name + "=";
		var ca = document.cookie.split(';');
		for(var i=0;i < ca.length;i++) {
			var c = ca[i];
			while (c.charAt(0)==' ') c = c.substring(1,c.length);
			if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
		}
		return null;
	}
	function deleteCookie(name) {
		setCookie(name,"",-1);
	}
	// loading image
	var i = 0;	
	if(!getCookie('first_scroll')){	
		$('#product_container img').each(function()
		{
				var me = this;
				$(this).hide()
				var j = i;
				setTimeout(function()
				{
				$(me).fadeIn(800);
				}, i)
				i += 100
			
		});			
	}	
	// pagination
	
	// load data
	function last_msg_funtion() 
	{ 
	   setCookie('first_scroll',1, 1);
	   var ID=$(".message_box:last").attr("id");
		$.post("load_next_page.php?action=get&last_msg_id="+ID,
		
		function(data){
			if (data != "") {
				var $newItems = $(data)
				$("#product_container").append($newItems).isotope( 'appended', $newItems);					
			}
			$('div#last_msg_loader').empty();
			$("html").animate({ scrollTop: $(document).height()},2000);
		});
		 
		setCookie('first_scroll',0, 1);
	};  
	$('#last_msg_loader').live('click', function(){
		if(!getCookie('first_top')){
			last_msg_funtion();
		}
				
	});	
	$(window).scroll(function(){	
		if  ($(window).scrollTop()== $(document).height() - $(window).height()){
		   if(!getCookie('first_top')){
			$('div#last_msg_loader').html('<img src="img/next-page.jpg" style="border:0">');
			//last_msg_funtion();
		   }
		  
		}
	}); 
	//end load	
	for(var i=1; i<50;i++){
		id="#fancy-target-"+ i;
		$(id).ezpz_tooltip();
	}
		
});
</script>
<script type="text/javascript" src="js/menu.js"></script>

